<template>
	<div class="fillcontain">
		<head-top></head-top>
		<div class="table_container">
			<el-table :data="accountdetails" highlight-current-row style="width: 100%">
				<el-table-column property="id" type="index" width="100" label="序号">
				</el-table-column>
				<el-table-column property="detailtypename" label="财务类型" width="220">
				</el-table-column>
				<el-table-column label="账务资金" width="220">
					<template slot-scope="scope">{{ scope.row.money|moneyFilter}}</template>
				</el-table-column>
				<el-table-column label="账户余额">
					<template slot-scope="scope">{{ scope.row.accountmoney|moneyFilter}}</template>
				</el-table-column>
				<el-table-column property="memo" label="备注信息">
				</el-table-column>
				<el-table-column label="明细时间">
					<template slot-scope="scope">{{ scope.row.detaildatetime|moment}}</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15,20]"
				 :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import headTop from '../components/headTop'
	import {
		selectAccountdetail
	} from '@/api/getData'
	export default {
		data() {
			return {
				accountdetails: [],
				//分页
				page: 0,
				size: 5,
				currentPage: 1,
				count: 0,
			}
		},
		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		computed: {
			...mapState(['adminInfo']),
		},
		filters: {
			moneyFilter: function(val) {
				return '￥' + val + '.00';
			}
		},
		methods: {
			async initData() {
				try {
					const res = await selectAccountdetail(this.currentPage,this.size,this.adminInfo.user.id);
					this.count = res.total;
					this.accountdetails = res.rows;
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			//分页
			handleSizeChange(val) {
				this.size = val;
				this.initData()
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.page = (val - 1) * this.rows;
				this.initData()
			}
		},
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.table_container {
		padding: 20px;
	}
</style>
